import { useEffect, useState } from "react";
import { Space, Table, Button } from "antd";
import type { TableProps } from "antd";
import { upSHUf } from "../store/toolkit/toolkit";
import { getListApi, getDeleteApi } from "../api/user";
import styles from "./css/Home.module.scss";
import { useNavigate } from "react-router-dom";
import useAuth from "../hooks/useAuth";
import type { RootState } from '../store/index'
import { useSelector, useDispatch } from 'react-redux'
function Home() {
  const form = useSelector((state: RootState) => state.counter.form)
  const dispatch = useDispatch()
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  let isLogin = useAuth();
  if (!isLogin) {
    return null;
  }
  let nav = useNavigate();
  let [list, setList] = useState([]);
  async function fn() {
    const res = await getListApi();
    console.log(res);
    setList(res.rows);
  }
  useEffect(() => {
    fn();
  }, []);
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "id",
      dataIndex: "id",
      key: "id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "content",
      dataIndex: "content",
      key: "content",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "createdAt",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "title",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "updatedAt",
      dataIndex: "updatedAt",
      key: "updatedAt",
    },
    {
      title: "操作",
      key: "id",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            nav(`/xq/:id?id=${record.id}`);
          }}>详情 {record.name}</a>
          <a onClick={()=>del(record.id)}>Delete</a>
        </Space>
      ),
    },
  ];
  const del = async (id) => {
    const res = await getDeleteApi(id)
    console.log(res);
    
  }
  return (
    <div>
      {/* {list.map((item, index) => (
        <div
          key={item.id}
          className={styles.box}
          onClick={() => {
            nav(`/xq/:id?id=${item.id}`);
          }}
        >
          <div>{item.content}</div>
          <div>{item.createdAt}</div>
          <div>{item.title}</div>
          <div>{item.updatedAt}</div>
        </div>
      ))} */}
      <Table<DataType> columns={columns} dataSource={list} />
    {form}
    <Button onClick={()=>{
      dispatch(upSHUf())
    }}>加一</Button>
    </div>
  );
}

export default Home;
